<template>
	<view  class="container" v-if="specState">
		
		<view class="content">
			<view v-for="(tmp,index) in skuArray" :key="index">
				<view class="flex">
					<view class="name">规格名称</view>
					<view class=""><input class="uni-input" name="nickname" placeholder="请输入规格名称"
						 :data-src="index" @input="changeSkuName" :value="tmp.name" /></view>
					<view class="del">
						<image :src="skuDel" :data-src="index" @tap="delSku"></image>				
					</view>
				</view>
				<view class="flex">
					<view class="name">产品属性</view>
					<view class=""><input class="uni-input" name="nickname" placeholder="多个产品属性以,隔开"
						 :data-src="index" @input="changeSkuPro" :value="tmp.pro" /></view>
				</view>
			</view>
			<view class="flex creat" >
				<view class="name" v-if="skuArray.length==0">规格设置</view>
				<view class=""><button class="mini-btn" type="default" size="mini" @click="addSku">添加规格</button></view>
			</view>
		</view>
	
		<view class="cform" v-if="skuArray.length>0">
			<view class="rows" v-if="tmp.name!=''"  v-for="(tmp,index) in skuArray" :key="index">
				<view class="topName"><text>{{ tmp.name }}</text></view>				
				<view class="listchind" v-for="(t,i) in tmp.spec" :key="i">
						<view class="listtitle"><text>{{ t.name }}</text></view>
					<view class="flex">
						<view class="name">价格</view>
						<view><input class="uni-input" type="digit" placeholder="请输入零售价格" :data-src="index"  v-model="t.price" /></view>
					</view>
					<view class="flex">
						<view class="name">库存</view>
						<view><input class="uni-input" type="digit" placeholder="请输入商品库存" :data-src="index" v-model="t.stock"/></view>
					</view>
					<view class="flex" >
						<view class="name">重量</view>
						<view><input class="uni-input"  type="digit" placeholder="请输入重量(Kg)" :data-src="index"  v-model="t.weight"/></view>

					</view>
					<view class="flex" >
						<view class="name">成本价格</view>
						<view><input class="uni-input"  type="digit" placeholder="请输入成本价格" :data-src="index"  v-model="t.costPrice" /></view>
					</view>
				</view>
			</view>
		</view>
		
		<view class="footer">
		
		<button class="cancel" type="default" @tap="onTapCancel">取消</button> 
		<button class="submit" type="default" @tap="onTapSave">保存</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				skuArray: [],
				skuDetailArray: [],
				skuDel: '/static/img/del2.png',
				skuRetailPrice: '',
				skuCostPrice: '',
				skuWeight: '',
				skuStock: '',
				skuPro: '',
			}
		},
		onLoad(options) {
			let data = JSON.parse(options.data) 
			this.skuArray = data.skuArray
			this.skuDetailArray = data.skuDetailArray
			this.skuRetailPrice = data.skuRetailPrice
			this.skuStock = data.skuStock
		},
		methods: {
			addSku(e) {
				let tmp = {
					name: '',
					pro: ''
				};
				this.skuArray.push(tmp);
			},
			delSku(e) {
				this.skuArray.splice(e.target.dataset.src, 1);
				this.updateSkuDetail()
			},
			changeSkuName(e) {
				this.skuArray[e.target.dataset.src].name = e.detail.value;
			},
			changeSkuPro(e) {
				if (e.detail.value == '' || e.detail.value == null) {

				} else {
					if (this.skuArray[e.target.dataset.src].name == '' || this.skuArray[e.target.dataset.src].name == null) {
						uni.showToast({
							title: '请填写规格名称',
							icon: 'none'
						});
					}
					this.skuArray[e.target.dataset.src].pro = e.detail.value;
					this.updateSkuDetail()
				}

			},
			updateSkuDetail(){
				this.skuDetailArray = [];
				if (this.skuArray.length == 1) {
					for (let j = 0; j < this.skuArray[0].pro.split("#").length; j++) {
						let tmp = {
							retailPrice: '',
							costPrice: '',
							stock: '',
							name: ''
						};
						tmp.name = this.skuArray[0].pro.split("#")[j];
						this.skuDetailArray.push(tmp);
					}
				}
				if (this.skuArray.length == 2) {
				
					for (let j = 0; j < this.skuArray[0].pro.split("#").length; j++) {
						for (let k = 0; k < this.skuArray[1].pro.split("#").length; k++) {
							let tmp = {
								retailPrice: '',
								costPrice: '',
								stock: '',
								name: ''
							};
							tmp.name = this.skuArray[0].pro.split("#")[j] + "-" + this.skuArray[1].pro.split("#")[k];
							this.skuDetailArray.push(tmp);
						}
					}
				}
				if (this.skuArray.length == 3) {
					for (let j = 0; j < this.skuArray[0].pro.split("#").length; j++) {
						for (let k = 0; k < this.skuArray[1].pro.split("#").length; k++) {
							for (let m = 0; m < this.skuArray[2].pro.split("#").length; m++) {
								let tmp = {
									retailPrice: '',
									costPrice: '',
									stock: '',
									name: ''
								};
								tmp.name = this.skuArray[0].pro.split("#")[j] + "-" + this.skuArray[1].pro.split("#")[k] + "-" + this.skuArray[
									2].pro.split("#")[m];
								this.skuDetailArray.push(tmp);
							}
						}
					}
				}
			},
			changeSkuDetailRetail(e) {
				this.skuRetailPrice = '';
				this.skuDetailArray[e.target.dataset.src].retailPrice = e.detail.value;
				let tmp = 0;
				for (let i = 0; i < this.skuDetailArray.length; i++) {
					if (this.skuDetailArray[i].retailPrice == '') {
						tmp = 1;
						break;
					}
				}
				if (tmp == 0) {
					this.skuRetailPrice = Math.min.apply(Math, this.skuDetailArray.map(item => {
						return item.retailPrice
					}));
				}
			},
			changeSkuDetailCost(e) {
				this.skuDetailArray[e.target.dataset.src].costPrice = e.detail.value;
			},
			changeSkuDetailWeight(e) {
				this.skuDetailArray[e.target.dataset.src].weight = e.detail.value;
			},
			changeSkuDetailStock(e) {
				this.skuStock = '';
				this.skuDetailArray[e.target.dataset.src].stock = e.detail.value;
				let tmp = 0;
				for (let i = 0; i < this.skuDetailArray.length; i++) {
					if (this.skuDetailArray[i].stock == '') {
						tmp = 1;
						break;
					}
				}
				if (tmp == 0) {
					this.skuStock = 0;
					for (let item in this.skuDetailArray) {
						this.skuStock = parseInt(this.skuStock) + parseInt(this.skuDetailArray[item].stock);
					}
				}
			},
			changeSkuRetail(e) {
				this.skuRetailPrice = e.detail.value;
			},
			changeSkuWeight(e) {
				this.skuWeight = e.detail.value;
			},
			changeSkuCost(e) {
				this.skuCostPrice = e.detail.value;
			},
			changeSkuStock(e) {
				this.skuStock = e.detail.value;
			},
			changeExpressFee(e) {
				this.expressFee = e.detail.value;
			},
			onTapCancel(){
				uni.navigateBack()
			},
			onTapSave(){
				for(let i=0;i<this.skuArray.length;i++){
					if(this.skuArray[i].name==""||this.skuArray[i].name==null){
						uni.showToast({
							title: '请填写规格名称',
							icon: 'none'
						});
						return false;
					}
					if(this.skuArray[i].pro==""||this.skuArray[i].pro==null){
						uni.showToast({
							title: '请填写产品属性',
							icon: 'none'
						});
						return false;
					}
				}
				for(let i=0;i<this.skuDetailArray.length;i++){
					if(this.skuDetailArray[i].retailPrice==""||this.skuDetailArray[i].retailPrice==null){
						uni.showToast({
							title: '请填写价格',
							icon: 'none'
						});
						return false;
					}
					if(this.skuDetailArray[i].stock==""||this.skuDetailArray[i].stock==null){
						uni.showToast({
							title: '请填写库存',
							icon: 'none'
						});
						return false;
					}
				}
				uni.$emit('getSkuData',{skuArray:this.skuArray,skuDetailArray:this.skuDetailArray,skuRetailPrice:this.skuRetailPrice,skuStock:this.skuStock})
				uni.navigateBack()
			}
		}
	}
</script>

<style lang="scss">
	.content{
		padding: 20rpx;
	}
	.flex{
		margin-top: 20rpx;
	}
	.name{
		width: 170rpx;
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
	}
	.mini-btn{
		height: 60rpx;
		line-height: 60rpx;
		background: #5cb85c;
		color: #fff;
	}
	.creat{
		justify-content: center;
	}
	.creat .name{
		color: #5cb85c;
	}
	.del image{
		position: relative;
		width: 60rpx;
		height: 60rpx;
		top:50%;
		left:80%
	}
	.cform{
		padding: 20rpx;
	}
	.rows{
		background: #fff;
		border-radius: 10rpx;
		margin-bottom: 20rpx;
		box-shadow: 0 0 5rpx 5rpx #e2e2e2;
	}
	.topName{
		height: 60rpx;
		line-height: 60rpx;
		text-align: center;
		background: #eee;
	}
	.listchind{
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
	}
	.listtitle{
		height: 60rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #eee;
		padding-left: 20rpx;
	}
	.item {
		margin-bottom: 200rpx;
		.uni-input {
		    height: 50rpx;
		}
	}
	.listchind .uni-input{
		box-shadow: 0 0 10rpx 3rpx #e2e2e2;
	}
	.uni-flex.uni-row {
	    display: flex;
	    flex-direction: row;
	    line-height: 1.8;
	}
	.uni-input{
		padding: 14rpx 26rpx;
		background-color: #fff !important;
	}

	.container {
		position: fixed;
		box-sizing: border-box;
		top: 85rpx;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #F2F2F2;
		z-index: 999;		
		overflow-y: auto;
		padding-bottom: 205rpx;
		.footer {
			border-top: 1px solid #EDEDED;
			width: 100vw;
			position: fixed;
			bottom: 0;
			height: 100rpx;
			z-index: 10;
			background-color: #ffffff;
			box-shadow: 0 -5rpx 8rpx 3rpx #e2e2e2;
			display: flex;
			justify-content: center;
			align-items: center;

			button {
				width: 150rpx;
				height: 60rpx;
				line-height: 60rpx;
				font-size: 24rpx;
				margin: 0;
			}

			button:after {
				border: none;
			}

			button:active {
				opacity: 0.5;
			}

			.cancel {
				color: #fff;
				background: #c7c7c7;
			}

			.submit {
				background: #5cb85c;
				color: #ffffff;
				margin-left: 50rpx;
			}
			
		}
	}
</style>
